@import '../bootstrap'
@import '../theme'

/* Theme */
input-group($material)
  input,
  textarea
    color: $material.text.primary

    &:disabled
      color: $material.text.disabled

  .input-group__details
    color: $material.text.secondary

  &.input-group--textarea:not(.input-group--full-width)
    .input-group__input
      border: 2px solid $material.text.secondary

  .input-group__append-icon
    padding: 0 6px
    transition: .3s $transition.ease-in-out
    width: 32px

  // This is specific for selects
  &.input-group--dirty
    .input-group__selections__comma
      color: $material.text.primary

  &:not(.input-group--error)
    label
      color: $material.text.secondary

    &.input-group--disabled
      label
        color: $material.text.disabled

    .input-group__details:before
      background-color: $material.input-bottom-line

    &:not(.input-group--focused)
      .input-group__input
        .input-group__append-icon,
        .input-group__prepend-icon
          color: $material.text.secondary

      &:not(.input-group--disabled):not(.input-group--overflow):not(.input-group--segmented):not(.input-group--editable):hover
        .input-group__details:before
          background-color: $material.text.primary

        &.input-group--textarea:not(.input-group--full-width)
          .input-group__input
            border-color: $material.text.primary

  .input-group__counter
    color: $material.text.secondary

  &.input-group
    &--overflow, &--segmented, &--editable
      .input-group__input,
      .input-group__details
        &:before
          background-color: $material.dividers

  &.input-group--disabled
    .input-group__details:before
      background-color: transparent
      background-image: linear-gradient(
        to right,
        $material.text.disabled 0,
        $material.text.disabled 33%,
        transparent 0
      )

  .input-group--text-field
    &__prefix, &__suffix
      color: $material.text.secondary

    &.input-group--disabled
      &__prefix, &__suffix
        color: $material.text.disabled

theme(input-group, "input-group")

.input-group
  display: inline
  min-height: 24px
  padding: $input-group-padding
  position: relative
  height: 100%
  width: 100%
  outline: none
  transition: box-shadow $primary-transition


/** Label */
.input-group
  label
    font-size $input-font-size
    line-height: $input-font-size * 2
    width: $input-height
    min-height: 0
    overflow: hidden
    pointer-events: none
    text-align: left
    text-overflow: ellipsis
    transform: translateX(18px)
    transform-origin: top left
    transition: .4s $transition.fast-in-fast-out
    white-space: nowrap
    z-index: 0

/** Blocks */
.input-group
  &__input
    display: flex
    flex: 1 0 100%
    min-height: 0
    min-width: $input-height

/** Icons */
.input-group
  &__icon-cb
    cursor: pointer

.input-group
  &.input-group--focused
    .input-group__append-icon,
    .input-group__prepend-icon
      color: $theme.primary

  &.input-group--append-icon, &.input-group--selection-controls
    label

  &.input-group--prepend-icon
    label
      max-height: 75%

  &.input-group--append-icon.input-group--prepend-icon
    label
      max-height: 65%

/** States */
.input-group
  // Single Line
  &.input-group--single-line,
  &.input-group--solo
    label
      transform: translate3d(0,0,0)

    &.input-group--dirty
      label
        display: none

  // Solo
  &.input-group--solo
    background: #fff
    min-width: 46px
    border-radius: $card-border-radius
    padding: 0
    elevation(2)

    label
      top: 7px
      padding-left: 16px
      transform: none !important

    &:hover
      elevation(4)

    .input-group__input
      padding: 8px 16px

    .input-group__details
      display: none

  &--disabled
    .input-group__details:before
      background-color: transparent
      background-position: bottom
      background-size: 3px 1px
      background-repeat: repeat-x

  // Focused
  &.input-group--text-field
    &:not(.input-group--single-line):not(.input-group--error)
      &.input-group--focused,
      &:focus
        label
          color: $theme.primary

        .input-group__input
          border-color: $theme.primary

    &.input-group--focused,
    &:focus
      &:not(.input-group--disabled)
        .input-group__details
          &:after
            transform: scaleX(1)

  // Required
  &--required
    label:after
      content: '*'

    &.input-group--focused
      label:after
        color: $theme.error

  // Error
  &.input-group--error
    input,
    textarea
      caret-color: $theme.error

    .input-group__input
      border-color: $theme.error !important

    label
      animation: shake .6s $transition.swing

    label,
    .input-group__input .icon
      color: $theme.error !important

    .input-group__details
      &:after,
      &:before
        background-color: $theme.error

/** Details */
.input-group
  .slide-y-transition-leave,
  .slide-y-transition-leave-to
    position: absolute

  &__details
    padding-top: 4px
    flex: 1 0 100%
    font-size: 12px
    min-width: 26px
    overflow: hidden
    position: relative
    height: 100%

    &:after, &:before
      content: ''
      position: absolute
      left: 0
      transition: .3s $transition.fast-out-slow-in

    &:after
      background-color: $theme.primary
      top: 0
      width: 2px
      transform: scaleY(0)
      transform-origin: center center 0
      height: 100%
      z-index: 1

    &:before
      top: 0
      width: 1px
      height: 100%
      z-index: 0

  &--hide-details
    .input-group__details
      min-height: 2px
      padding: 0

/** Hint */
.input-group
  &__hint
    // flex: 1 0
    transition: .3s $transition.fast-in-fast-out

/** Error */
.input-group
  .input-group__error
    flex: 1 0
    transition: .3s $transition.fast-in-fast-out
    color: $theme.error


/** Types */
.input-group
  &--overflow,
  &--segmented,
  &--editable
    &.input-group--active
      background-color: #fff
